
const id = window.localStorage.getItem('id')
const token = window.localStorage.getItem('token')
const onBox = document.querySelector('.on')
const offBox = document.querySelector('.off')
// 获取 all （全部）元素
const all = document.querySelector('.all')


// 给 all 添加点击事件
$(all).mouseover(() =>{
    $('.showw').fadeIn(500)
})
$('.bot').mouseout(() =>{
    $('.showw').fadeOut(50).stop()
})

if (!id) {
    onBox.classList.remove('active')
    offBox.classList.add('active')
  }
  const xhr = new XMLHttpRequest()
  xhr.open('GET', 'http://localhost:8888/users/info?id=' + id)
  xhr.onload = function () {
    const res = JSON.parse(xhr.responseText)
    if (res.code === 401) {
      onBox.classList.remove('active')
      offBox.classList.add('active')
    }
    if (res.code === 1) {
      onBox.firstElementChild.innerText = res.info.nickname
      offBox.classList.remove('active')
      onBox.classList.add('active')
    }
  }
  
  xhr.setRequestHeader('authorization', token)
  xhr.send()


class Enlarge {
  constructor(select) {
      this.ele = document.querySelector(select)
      this.show = this.ele.querySelector('.show')
      this.mask = this.ele.querySelector('.mask')
      this.list = this.ele.querySelector('.list')
      this.enlarge = this.ele.querySelector('.enlarge')
      this.show_width = this.show.clientWidth
      this.show_height = this.show.clientHeight
      this.mask_width = parseInt(window.getComputedStyle(this.mask).width)
      this.mask_height = parseInt(window.getComputedStyle(this.mask).height)
      this.bg_width = parseInt(window.getComputedStyle(this.enlarge.firstElementChild).width)
      this.bg_height = parseInt(window.getComputedStyle(this.enlarge.firstElementChild).height)
      this.setScale()
      this.overOut()
      this.changeImg()
      this.move()
  }
  setScale() {
      this.enlarge_width = this.mask_width * this.bg_width / this.show_width
      this.enlarge_height = this.mask_height * this.bg_height / this.show_height
      this.enlarge.style.width = this.enlarge_width + 'px'
      this.enlarge.style.height = this.enlarge_height + 'px'
  }
  overOut() {
      this.show.addEventListener('mouseover', () => {
          this.mask.style.display = 'block'
          this.enlarge.style.display = 'block'
      })
      this.show.addEventListener('mouseout', () => {
          this.mask.style.display = 'none'
          this.enlarge.style.display = 'none'
      })
  }
  changeImg() {
      this.list.addEventListener('click', e => {
          if (e.target.nodeName !== 'IMG') return
          for (let i = 0; i < this.list.children.length; i++) {
              this.list.children[i].classList.remove('active')
          }
          e.target.classList.add('active')
          // console.log('dianjil')
          const show_url = e.target.dataset.show
          const enlarge_url = e.target.dataset.enlarge
          this.show.firstElementChild.src = show_url
          this.enlarge.firstElementChild.src = enlarge_url
      })
  }
  move() {
      this.show.addEventListener('mousemove', e => {
          let x = e.offsetX - this.mask_width / 2
          let y = e.offsetY - this.mask_height / 2
          if (x <= 0) x = 0
          if (y <= 0) y = 0
          if (x >= this.show_width - this.mask_width) x = this.show_width - this.mask_width
          if (y >= this.show_height - this.mask_height) y = this.show_height - this.mask_height
          this.mask.style.left = x + 'px'
          this.mask.style.top = y + 'px'
          const bg_x = x * this.enlarge_width / this.mask_width
          const bg_y = y * this.enlarge_height / this.mask_height
          this.enlarge.firstElementChild.style.left = -bg_x + 'px'
          this.enlarge.firstElementChild.style.top = -bg_y + 'px'
      })
  }
}


const goodsId = window.sessionStorage.getItem('goodsId')
const cateBox = document.querySelector('.box > .right')
const img = document.querySelector('.box > .left')


console.log(goodsId)

$.ajax({
    url:'/dl',
    data:{
        itemId: goodsId,
        rewardType:"point"
    },
    dataType:'json',
    success(res){
        console.log(res)
        getXiang(res)
    }
})
function getXiang(res) {
    let strr =''
    strr += `
          <div class="show">
              <img src=${res.data.itemInfo.imgContent[0]}>
              <!-- 遮罩层 -->
              <div class="mask"></div>
          </div>

          <!-- 切换选项的盒子 -->
          <div class="list">
              <img class="active" src=${res.data.itemInfo.imgContent[0]}
                  data-show=${res.data.itemInfo.imgContent[0]}
                  data-enlarge=${res.data.itemInfo.imgContent[0]}>
              <img src=${res.data.itemInfo.imgContent[1]}
                  data-show=${res.data.itemInfo.imgContent[1]}
                  data-enlarge=${res.data.itemInfo.imgContent[1]}>
          </div>

          <!-- 放大的盒子 -->
          <div class="enlarge">
              <img src=${res.data.itemInfo.imgContent[0]}>
          </div>
          `
          let str = ''
    str +=`
    <p class="title">${res.data.itemInfo.title}</p>
        <p class="sinfo">${res.data.itemInfo.summary}</p>
        <P class="notice">${res.data.notice.msg}</P>
        <p class="price">
          <span class="current">￥${res.data.itemInfo.priceSale}</span>
          <span class="old">￥${res.data.itemInfo.priceMarket}</span>
        </p>
        <p class="number">
          <button>-</button>
          <input type="text" value="1">
          <button>+</button>
        </p>
        <p class="btns">
          <button>立即购买</button>
          <button>加入购物车</button>
        </p>
    `
          img.innerHTML = strr
          cateBox.innerHTML = str
          const en = new Enlarge('#left')
}

